import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import Navigation from '../../components/Navigation';
import './workbench.css';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem(<NavLink to='/workbench/home'>首页</NavLink>, '1', <PieChartOutlined />),
    getItem(<NavLink to='/workbench/scene'>作品</NavLink>, '2', <DesktopOutlined />),
    getItem(<NavLink to='/workbench/source'>素材</NavLink>, '9', <FileOutlined />),
    getItem('模版', 'sub1', <UserOutlined />, [
        getItem('模版商城', '3'),
        getItem('我的收藏', '4'),
    ]),
    getItem('文件夹', 'sub2', <TeamOutlined />),
];

const Workbench: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);

    return (
        <div>
            <div className='workbench_top'>
                <Navigation />
            </div>
            <Layout style={{ marginTop: "10px", backgroundColor: 'pink' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} theme="light">
                    <Menu theme="light" defaultSelectedKeys={['1']} mode="inline" items={items} className='menu' />
                </Sider>
                <Layout>
                    <Outlet />
                </Layout>
            </Layout>
        </div>
    );
};

export default Workbench;